<template>
  <div class="project-details">
    <h2>{{ project.name }} - 项目详情</h2>
    <p>{{ project.description }}</p>
    <ModuleManagement :modules="modules" />
    <div class="actions">
      <button @click="editProject">编辑项目</button>
      <button @click="deleteProject" class="danger">删除项目</button>
    </div>
  </div>
</template>

<script>
import ModuleManagement from '@/components/ProjectManagement/ModuleManagement.vue';
import axios from 'axios';

export default {
  components: { ModuleManagement },
  data() {
    return {
      project: {},
      modules: [],
    };
  },
  created() {
    this.loadProject();
  },
  methods: {
    async loadProject() {
      try {
        // 从路径中提取项目 ID
        const pathParts = this.$route.path.split('/');
        const projectId = parseInt(pathParts[pathParts.length - 1], 10);
        const response = await axios.get(`http://localhost:8080/project/${projectId}`);
        this.project = response.data;
      } catch (error) {
        console.error('Failed to load project details:', error);
      }
    },
    editProject() {
      console.log('编辑项目');
    },
    async deleteProject() {
      if (confirm('确定要删除此项目吗？')) {
        try {
          await axios.delete(`http://localhost:8080/projects/${this.project.id}`);
          this.$router.push('/project-list');
        } catch (error) {
          console.error('Failed to delete project:', error);
        }
      }
    }
  }
};
</script>

<style scoped>
.project-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

h2 {
  font-size: 1.5em;
  margin-bottom: 0;
}

p {
  font-size: 1em;
  margin-top: 0;
}

.actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.danger {
  background-color: #ff0000;
  color: #ffffff;
}

.danger:hover {
  background-color: #cc0000;
}
</style>